<!--报表主页面-->
<template>
<div class="main">
    <div class="top">
        <el-row>
            <el-col :span="10">
                <div class="logo">
                    <el-button type="primary" icon="el-icon-back" @click="showMainPage">&nbsp;&nbsp;{{$t("report.returnBtnName")}}&nbsp;&nbsp;</el-button>
                </div>
            </el-col>
            <el-col :span="14">
                <div class="userinfo" v-if="login.roleid == 2 || login.roleid == 3">
                    <el-button type="primary" icon="el-icon-delete" @click="clearHistoryData">{{$t("report.deleteDataBtnName")}}</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
    <div class="center">
        <el-row :gutter="20" style="height:60%;width:60%;">
            <el-col :span="12">
                <div @click="showShopReprtPage">
                    <el-card shadow="always" class="nav" style="min-height:180px;background-image: linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%);cursor: pointer;">
                        {{$t("report.route.shopReportMenuName")}}
                    </el-card>
                </div>
            </el-col>
            <el-col :span="12">
                <div @click="showStaffReprtPage">
                    <el-card shadow="always" class="nav" style="min-height:180px;background-image: linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%);cursor: pointer;">
                        {{$t("report.route.staffReportMenuName")}}
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</div>
</template>

<script>
import {
    clearShopHistory,
    statShopStaffSalary
} from '../../api/api';
import jwt_decode from 'jwt-decode';

export default {
    data() {
        return {
            login: {
                state: false,
                username: "",
                roleid: ""
            }
        };
    },
    mounted() {
        if (sessionStorage.getItem('userToken') != null) {
            var userToken = jwt_decode(sessionStorage.getItem("userToken"));
            this.login.username = userToken.staffName;
            this.login.state = true;
            console.log("角色编号：" + userToken.roleId);
            this.login.roleid = userToken.roleId;
            //TODO:当非登陆状态时候，导航的菜单背景颜色为#c0c4cc,#909399
            //TODO:当为登陆状态时候，导航的菜单背景颜色为可用的颜色值
        }
        statShopStaffSalary().then(res => {});
    },
    methods: {
        showMainPage() {
            this.$router.push({
                path: '/home'
            });
        },
        showShopReprtPage() {
            if (this.login.roleid == 2 || this.login.roleid == 3) {
                //显示店铺报表页面
                this.$router.push({
                    path: '/report/shop'
                });
            }
        },
        showStaffReprtPage() {
            //显示员工报表页面
            this.$router.push({
                path: '/report/staff'
            });
        },
        clearHistoryData() {
            //清空历史销售数据
            this.$confirm(this.$t("report.delDataDialog.content"), this.$t("report.delDataDialog.title"), {
                type: 'warning'
            }).then(() => {
                //处理业务
                clearShopHistory().then(res => {
                    let {
                        msg,
                        code
                    } = res;
                    if (code !== "0") {
                        this.$message({
                            message: msg,
                            type: 'error'
                        });
                    } else {
                        this.$message({
                            message: this.$t("report.delDataDialog.successMsg"),
                            type: 'success'
                        });
                    }
                });

            }).catch(() => {

            });
        },
        testChangeLang() {
            this.$i18n.locale = "en";
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~scss_vars';

.main {
    background-color: #012547;
    display: grid;
    grid-template-rows: 60px auto;
    color: #ffffff;
}

.top {
    background-color: #014171;
    padding: 0px 20px;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav {
    display: flex;
    justify-content: Center;
    align-items: Center;
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    font-size: 48px;
    color: #ffffff;
}

.logo {
    display: flex;
    justify-content: left;
    align-items: Center;
    height: 60px;
    font-size: 26px;
}

.userinfo {
    display: flex;
    justify-content: left;
    align-items: Center;
    text-align: right;
    float: right;
    height: 60px;
}
</style>
